<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
         /* 1.标签选择器  标签+声明块*/
     /* div{
        background-color: red;
     } */
     /* 2.id选择器 #id+声明块*/
     #second{
        background-color:pink;
     }
     /* 3.类选择器class选择器 .类名+声明块 */
     .first{
        background-color: blue;
     }
     /* 4.并集选择器 组合选择器 使用.隔开 */
     #second,.first,section{
        width: 100px;
        height: 100px;
        color: orange;
     }
     /* 5.后代选择器
     1.子代选择器：直接子元素
     2.后代选择器：所有后代 包括子代和其他后代 */
     /* 5.1子代选择器 使用>隔开*/
     /* section>div{
        font-size: 28px;
        color: blue;
        background-color: red;
     } */
     /* 5.2选中所有后代 使用空格隔开 */
     /* section div{
        width: 100px;
        height: 100px;
     } */
    </style>
    
</head>
<body>
    <div class="first">我是div1</div>
    <div id="second">我是div2</div>
    <div>我是div3</div>
    <div class="first four">我是div4</div>
    <p>段落标签</p>
    <section>块级元素
        <div>我是子代div</div>
        <div>我是子代div</div>
        <div>我是子代div</div>
        <div>我是子代div</div>
        <p>
            <div>我是后代div</div>
            <div>我是后代div</div>
            <div>我是后代div</div>
            <div>我是后代div</div>
        </p>
    </section>

</body>
</html>